<template>
    <div class="music-info-detail">
        <el-button class="return-btn" type="primary" @click="router.back()">返回</el-button>
        <h2>{{ info.title }}</h2>
        <p>{{ info.detail }}</p>
    </div>
</template>

<script setup lang="ts" name="MusicInfo">
import { ref } from "vue";
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { getMusicInfoDetail } from '@/api';

let info = ref<any>([])
const getData = async () => {
    info.value = await getMusicInfoDetail(Number(route.params.id));
}
getData()
</script>

<style lang="less" scoped>
.music-info-detail {
    text-align: center;
    position: relative;

    .return-btn {
        position: absolute;
        top: 0;
        right: 0;
    }

    p {
        margin-top: 30px;
    }
}
</style>